<template>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 电影卡片 -->
        <div class="card" v-for="(film,index) in films" :key="index" @click = "jump(film.title)">
            <!-- 电影卡片-封面 -->
            <div class="cover" >
                <img :src="film.pic" alt="皇帝的新图" >
            </div>
            <!-- 电影卡片-信息 -->
            <div class="inform">
                <!-- 电影名 -->
                <div class="title">{{film.title}}</div>
                <!-- 电影评分 -->
                <div class="grade">
                    <span>评分:{{valueTitle(film.raiting)}}</span>
                    <el-rate
                        v-model= "value"
                        disabled
            
                        text-color="#ff9900"
                    >
                    </el-rate>
                </div>
                <!-- 电影分类 -->
                <div class="sort" v-if="film.labels">{{film.labels[0]}}/{{film.labels[1]}}/{{film.labels[2]}}</div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router'

const $router = useRouter()
// 初始化数据
// 储存数据
const films = ref([])
onMounted(() => {
    axios.get('http://122.112.161.135:8000/films/top250').then(res => {
        // console.log(res);
        films.value = res.data.result

        films.value.forEach(film => {
            let count = film.raiting/2.
            film.raiting = count.toFixed(1)
        })

        // console.log(films.value[0].raiting);

    })
})



// 电影评分 el-rate中的评分是5分制,而请求到的数据是10分制,需要处理一下
const value = ref(3.7)

 const valueTitle = computed(()=> (rate)=>{
    let count = rate*2.
    return count.toFixed(1)
}) 


// 跳转到其他页面
function jump (name) {
    $router.push('/detail/'+name)
}

</script>

<style scoped>
/* 页面容器 */
.container {
    width: 500px;
    height: 100vh;
    /* background-color: pink; */
    margin: 0 auto;
}

/* 电影卡片 */
.container .card {
    display: flex;
    height: 150px;
    width: 100%;
    /* background-color: skyblue; */
    padding: 10px 30px;
    border: 1px solid rgb(243, 243, 243);
    /* box-shadow: 1px 1px 1px #888888; */
    box-sizing: border-box;
    cursor: pointer;
}

.container .card:hover {
    background-color: #f0eff0;
}

/* 电影卡片-封面 */
.container .card .cover {
    flex: 1;
    background-color: pink;
}

.card .cover img {
   height: 100%;
   width: 100%;
}
/* 电影卡片-信息 */
.container .card .inform {
    flex: 4;
    /* background-color: blueviolet; */
    padding-left: 10px;
}

/* 信息div个公共样式 */
.card .inform div {
    margin-bottom: 7px;
}

/* 电影名 */
.card .inform .title {
    color: #3d7bb2;
    font-weight: 600;
    font-size: 18px;
}

/* 电影评分 */
.card .inform .grade {
    /* color: #3d7bb2; */
    /* font-weight: 600; */
    font-size: 16px;
}

/* .inform .grade span {


} */

/* 电影分类 */
.card .inform .sort {
    color: #bab6ba;
    font-size: 14px;
}


</style>